<template>
  <div class="products">
    <div class="products-header">
      <h1>所有商品</h1>
      <div class="filters">
        <input 
          type="text" 
          v-model="searchQuery" 
          placeholder="搜索商品..." 
          class="search-input"
        >
        <select v-model="selectedCategory" class="category-select">
          <option value="">所有分类</option>
          <option value="电子产品">电子产品</option>
          <option value="智能设备">智能设备</option>
          <option value="电子配件">电子配件</option>
          <option value="电脑配件">电脑配件</option>
        </select>
        <select v-model="sortBy" class="sort-select">
          <option value="">默认排序</option>
          <option value="price-asc">价格从低到高</option>
          <option value="price-desc">价格从高到低</option>
          <option value="rating">评分最高</option>
        </select>
      </div>
    </div>
    
    <div class="product-grid">
      <ProductCard 
        v-for="product in filteredProducts" 
        :key="product.id" 
        :product="product"
        @view-product="viewProduct"
      />
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import ProductCard from '../components/ProductCard.vue'
import { mockProducts } from '../utils/mockData.js'

export default {
  name: 'Products',
  components: {
    ProductCard
  },
  setup() {
    const router = useRouter()
    
    const searchQuery = ref('')
    const selectedCategory = ref('')
    const sortBy = ref('')
    
    // 使用模拟数据
    const products = ref(mockProducts)
    
    const filteredProducts = computed(() => {
      let result = products.value
      
      // 搜索过滤
      if (searchQuery.value) {
        result = result.filter(product => 
          product.name.toLowerCase().includes(searchQuery.value.toLowerCase())
        )
      }
      
      // 分类过滤
      if (selectedCategory.value) {
        result = result.filter(product => 
          product.category === selectedCategory.value
        )
      }
      
      // 排序
      if (sortBy.value) {
        result = [...result]
        if (sortBy.value === 'price-asc') {
          result.sort((a, b) => a.price - b.price)
        } else if (sortBy.value === 'price-desc') {
          result.sort((a, b) => b.price - a.price)
        } else if (sortBy.value === 'rating') {
          result.sort((a, b) => b.rating - a.rating)
        }
      }
      
      return result
    })
    
    const viewProduct = (id) => {
      router.push(`/product/${id}`)
    }
    
    return {
      searchQuery,
      selectedCategory,
      sortBy,
      products,
      filteredProducts,
      viewProduct
    }
  }
}
</script>

<style scoped>
.products {
  padding: 2rem 0;
}

.products-header {
  margin-bottom: 2rem;
}

.products-header h1 {
  text-align: center;
  margin-bottom: 1.5rem;
  color: #333;
}

.filters {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.search-input, .category-select, .sort-select {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 1rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.product-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.product-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 1rem;
}

.product-name {
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
  color: #333;
}

.product-category {
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.product-rating {
  color: #ffc107;
  margin-bottom: 0.5rem;
}

.star {
  margin-right: 2px;
}

.product-price {
  font-weight: bold;
  color: #e91e63;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.add-to-cart-btn {
  width: 100%;
  background-color: #42b983;
  color: white;
  border: none;
  padding: 0.8rem;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-to-cart-btn:hover {
  background-color: #359c6d;
}

@media (max-width: 768px) {
  .filters {
    flex-direction: column;
    align-items: center;
  }
  
  .search-input, .category-select, .sort-select {
    width: 100%;
    max-width: 300px;
  }
}
</style>